<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>借款管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap/bootstrap.min.css"/>
	<link href="/gradesign/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/>
	<link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap-table.min.css"/>
    <style type="text/css">
    	#addBorrowModal,#addLoanModal,#editDebtModal{margin-top:5%;margin-left:5%;margin-right:5%}
    	.second,.third{
            display: none;
        }
        .firstEdit,.secondEdit,.thirdEdit{
        	display:none;
        }
		.container{
			margin-top:100px;
		}
		body{
        	background:transparent;
    	}
    	section{
    		margin:0px 20px;
    	}
    </style>
</head>
<body>
	<section class="content-header">
		<h4>借款管理</h4>
	</section> 
	<section class="content table-content">
		<form class="form-inline" >
		<!-- 工具栏 -->
		<div id="toolbar">
			<input type="button" value="新增借入记录" id="addBtn" data-toggle="modal" data-target="#addBorrowModal" class="btn btn-primary" ></input>
			<input type="button" value="新增借出记录" id="addBtn" data-toggle="modal" data-target="#addLoanModal" class="btn btn-success" ></input>
			<input type="button" value="修改借款记录" id="editBtn" class="btn btn-info" onclick="editDebtItem()"></input>
			<input type="button" value="删除借款记录" id="deleteBtn" class="btn btn-warning" onclick="deleteDebtItem()"></input>
		</div>
		<!-- bootstrapTable -->
		</form>
		<table id="dataGrid">
		</table>
	</section>
	<div class="modal fade" id="addBorrowModal" tabindex="-1" role="dialog" >
		<div class="modal-diolog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">新增借入记录</h5>
				</div>
				<div class="modal-body">
					<form id="debtModalForm">
					<div class="row">
						<!-- 新增时ID自动创建，此处无用，但需将ID赋值于修改模态框ID处 -->
						<div class="form-group col-md-3" style="display:none">
							<label for="type2">ID</label>
							<input type="text" class="form-control" id="type2" placeholder="id" value="借入"/>
						</div>
						<div class="form-group col-md-3">
							<label for="debtItem2">借款记录名称</label>
							<input type="text" class="form-control" id="debtItem2" placeholder="借款记录名称"/>
						</div>
						<div class="form-group col-md-3">
							<label for="datetimepicker">借款日期</label>
							<div class="input-group date form_date  " id="datetimepicker" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
								<input type="text" class="form-control" id="debtDate2" placeholder="借款日期" />
								<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
						<div class="form-group col-md-3">
				            <label for="debtAccount2">借款账户</label>
				            <input type="text" id="debtAccount2" class="form-control" placeholder="借款账户"/>
				        </div>
			        	<div class="form-group col-md-3">
				            <label for="debtMoney2">借款金额</label>
				            <input type="text" id="debtMoney2" class="form-control" placeholder="借款金额"/>
				        </div>
					</div>
			    	<div class="row">
			    		<div class="form-group col-md-3">
							<label for="datetimepicker">预计还款日期</label>
							<div class="input-group date form_date  " id="datetimepicker2" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
								<input type="text" class="form-control" id="debtPlanDate2" placeholder="预计还款日期" />
								<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
			    		<div class="form-group col-md-3" >
				            <label for="borrowMember2">借款人</label>
				            <select class="form-control" id="borrowMember2" >
				            	<option th:each="memberName : ${nameList}" th:text="${memberName.membername}"></option>
				            </select>
				            <!-- <input type="text" id="incomeMember" class="form-control" placeholder="收入人"/> -->
				        </div>
			    		<div class="form-group col-md-3">
				            <label for="loanMember2">借出人</label>
				            <input type="text" id="loanMember2" class="form-control" placeholder="借出人"/>
				        </div>
			        	<div class="form-group col-md-3">
				            <label for="debtTip2">备注</label>
				            <input type="text" id="debtTip2" class="form-control" placeholder="备注"/>
				        </div>
			    	</div>
			    	</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="resetModal()">取消</button>
					<button type="button" class="btn btn-primary" onclick="submit2()">提交</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="addLoanModal" tabindex="-1" role="dialog" >
		<div class="modal-diolog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">新增借出记录</h5>
				</div>
				<div class="modal-body">
					<form id="debtModalForm">
						<div class="row">
							<!-- 新增时ID自动创建，此处无用，但需将ID赋值于修改模态框ID处 -->
							<div class="form-group col-md-3" style="display:none">
								<label for="type">ID</label>
								<input type="text" class="form-control" id="type" placeholder="id" value="借出"/>
							</div>
							<div class="form-group col-md-3">
								<label for="debtItem">借款记录名称</label>
								<input type="text" class="form-control" id="debtItem" placeholder="借款记录名称"/>
							</div>
							<div class="form-group col-md-3">
								<label for="datetimepicker">借款日期</label>
								<div class="input-group date form_date  " id="datetimepicker3" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
									<input type="text" class="form-control" id="debtDate" placeholder="借款日期" />
									<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
									<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
								</div>
							</div>
							<div class="form-group col-md-3">
					            <label for="debtAccount">借款账户</label>
					            <input type="text" id="debtAccount" class="form-control" placeholder="借款账户"/>
					        </div>
				        	<div class="form-group col-md-3">
					            <label for="debtMoney">借款金额</label>
					            <input type="text" id="debtMoney" class="form-control" placeholder="借款金额"/>
					        </div>
						</div>
				    	<div class="row">
				    		<div class="form-group col-md-3">
								<label for="datetimepicker">预计还款日期</label>
								<div class="input-group date form_date  " id="datetimepicker4" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
									<input type="text" class="form-control" id="debtPlanDate" placeholder="预计还款日期" />
									<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
									<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
								</div>
							</div>
				    		<div class="form-group col-md-3" >
					            <label for="borrowMember">借款人</label>
					            <input type="text" id="borrowMember" class="form-control" placeholder="借款人"/>
					            <!-- <input type="text" id="incomeMember" class="form-control" placeholder="收入人"/> -->
					        </div>
				    		<div class="form-group col-md-3">
					            <label for="loanMember">借出人</label>
					            <select class="form-control" id="loanMember" >
					            	<option th:each="memberName : ${nameList}" th:text="${memberName.membername}"></option>
					            </select>
					            
					        </div>
				        	<div class="form-group col-md-3">
					            <label for="debtTip">备注</label>
					            <input type="text" id="debtTip" class="form-control" placeholder="备注"/>
					        </div>
				    	</div>
			    	</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="resetModal()">取消</button>
					<button type="button" class="btn btn-primary" onclick="submit()">提交</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="editDebtModal" tabindex="-1" role="dialog" >
		<div class="modal-diolog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">修改借款记录</h5>
				</div>
				<div class="modal-body">
					<form id="debtModalFormEdit">
						<div class="row">
							<!-- 新增时ID自动创建，此处无用，但需将ID赋值于修改模态框ID处 -->
							<div class="form-group col-md-3" style="display:none">
								<label for="idEdit">ID</label>
								<input type="text" class="form-control" id="idEdit" placeholder="id" value="借入"/>
							</div>
							<div class="form-group col-md-3">
								<label for="debtItemEdit">借款记录名称</label>
								<input type="text" class="form-control" id="debtItemEdit" placeholder="借款记录名称"/>
							</div>
							<div class="form-group col-md-3">
								<label for="datetimepicker">借款日期</label>
								<div class="input-group date form_date  " id="datetimepicker5" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
									<input type="text" class="form-control" id="debtDateEdit" placeholder="借款日期" />
									<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
									<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
								</div>
							</div>
							<div class="form-group col-md-3">
					            <label for="debtAccountEdit">借款账户</label>
					            <input type="text" id="debtAccountEdit" class="form-control" placeholder="借款账户"/>
					        </div>
				        	<div class="form-group col-md-3">
					            <label for="debtMoneyEdit">借款金额</label>
					            <input type="text" id="debtMoneyEdit" class="form-control" placeholder="借款金额"/>
					        </div>
						</div>
				    	<div class="row">
				    		<div class="form-group col-md-3">
								<label for="datetimepicker">预计还款日期</label>
								<div class="input-group date form_date  " id="datetimepicker6" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
									<input type="text" class="form-control" id="debtPlanDateEdit" placeholder="预计还款日期" />
									<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
									<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
								</div>
							</div>
				    		<div class="form-group col-md-3" >
					            <label for="borrowMemberEdit">借款人</label>
					           	<input type="text" id="borrowMemberEdit" class="form-control" placeholder="借出人"/>
					        </div>
				    		<div class="form-group col-md-3">
					            <label for="loanMemberEdit">借出人</label>
					            <input type="text" id="loanMemberEdit" class="form-control" placeholder="借出人"/>
					        </div>
				        	<div class="form-group col-md-3">
					            <label for="debtTipEdit">备注</label>
					            <input type="text" id="debtTipEdit" class="form-control" placeholder="备注"/>
					        </div>
				    	</div>
			    	</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="resetModal()">取消</button>
					<button type="button" class="btn btn-primary" onclick="edit()">提交</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/gradesign/js/console/debt.js"></script>
</html>